<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item>主机设置</el-breadcrumb-item>
  </el-breadcrumb>

  <el-table :data="tableData" width="80%" ref="multipleTableRef" @selection-change="handleSelectionChange"
    :cell-class-name="tableCellClassName">
    <el-table-column prop="id" type="index" width="55" />
    <el-table-column prop="hostIp" label="主机IP"></el-table-column>

    <el-table-column prop="hostPort" label="SSH端口" width="100"></el-table-column>
    <el-table-column prop="firewallFlag" label="防火墙" width="100" style="{color:{{ colorRef }}}"
      :class="tableCellClassName" :formatter="formatter">
    </el-table-column>
    <el-table-column prop="selinuxFlag" label="selinux" width="100" :class="tableCellClassName" :formatter="formatter">
    </el-table-column>
    <el-table-column prop="isHostsFlag" label="hosts" width="100" :class-name="tableCellClassName" :formatter="formatter">
    </el-table-column>
    <el-table-column prop="sshFlag" label="SSH免密" width="100" class="text-danger"
      :formatter="formatter"></el-table-column>
    <el-table-column prop="isOptimize" label="系统优化" width="100" class="text-danger"
      :formatter="formatter"></el-table-column>

  </el-table>

  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect"
    v-loading="hostSetLoading">

    <div class="flex-grow" />
    <el-menu-item index="1" @click="autoOptimizeStart()">
      <el-icon>
        <UploadFilled />
      </el-icon>自动优化
    </el-menu-item>
  </el-menu>
</template>
 
<script>
import { ref, reactive, toRef } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
import axios from 'axios';
import global from '../components/Global.vue';

const state = reactive({
  color: "black"
});

export default {
  components: {
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      baseUrl: global.baseUrl,
      autoStartUrl: global.baseUrl+'/set/system/autoStart',
      listUrl: global.baseUrl+'/host/list',
      token: '*.xlsx'
    }
  },
  created() {
    this.loadTableData();
  },
  setup() {
    const tableData = ref([
      {
        id: 1,
        hostIp: '192.168.152.100',
        account: 'root',
        password: 'adsd#@!@#ks231',
        hostPort: 22,
        firewallFlag: 1,
        selinuxFlag: 1,
        isHostsFlag: 1,
        sshFlag: 1,
        isOptimize: 1
      }
    ]);

    const colorRef = toRef(state, "color");
    const hostSetLoading = ref(false);

    const formatter = (row, column, cellValue) => {
      //row每行的内容 column每一列的属性信息 cellValue单元格的值
      if (cellValue === 0) { //不包含值为 0 的情况 另做判断
        colorRef.value = "red";
        return 'X';
      } else if (cellValue === 1) { //cellValue会自动将0值过滤出来不展示 单独做判断
        colorRef.value = "green";
        return '✔';
      } else {
        colorRef.value = "black";
        return '-' //没有值时展示 --
      }
    };

    return {
      tableData,
      colorRef,
      formatter,
      hostSetLoading
    };
  },
  methods: {
    autoOptimizeStart() {
      this.hostSetLoading = true;
      console.log('自动优化开始......\n不需要参数，服务自行查询主机进行优化。');
      
      axios.put(this.autoStartUrl, {}, global.config)
        .then((response) => {
          console.info(response);
          this.tableData = response.data.data;
          this.hostSetLoading = false;
          this.$message({
            message: "自动安装成功",
            type: "success"
          });
        })
        .catch((error) => {
          console.error(error);
          this.hostSetLoading = false;
          this.$message({
            message: "自动安装异常",
            type: "error"
          })
        });
    },
    loadTableData() {
      axios.get(this.listUrl)
        .then((response) => {
          //console.log(response.data);
          this.tableData = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    }
  }
};
</script>

<style>
.active {
  color: rgb(1, 176, 1);
  font-weight: bold;
}

.text-danger {
  color: v-bind(colorRef);
  font-weight: bold;
}

.tableCellClassName {
  color: v-bind(colorRef);
  font-weight: bold;
}

.text-nomore {
  background: rgb(5, 50, 172);
}

.el-table .success-cell {
  color: #08a537;
}

.el-table .error-cell {
  color: #bf0707;
}

.el-table {
  margin: 3px auto;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-el-table-v2__header-row .custom-header-cell {
  border-right: 1px solid var(--el-border-color);
}

.el-el-table-v2__header-row .custom-header-cell:last-child {
  border-right: none;
}

.el-primary-color {
  background-color: var(--el-color-primary);
  color: var(--el-color-white);
  font-size: 14px;
  font-weight: bold;
}

.el-primary-color .custom-header-cell {
  padding: 0 4px;
}
</style>
  